<template>
  <view class="app-container bill-pay-page">
    <view class="content">
      <view class="amount">
        <view class="title">支付金额</view>
        <view class="number">{{ bill.cost }}</view>
      </view>
      <view class="pay-methods">
        <view class="pay-method-item">
          <view class="left">
            <image class="icon"
                   style="width: 66px; height: 66px"
                   src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-front/druid/saas-v5/%E5%BE%AE%E4%BF%A1%E6%94%AF%E4%BB%98%402x.png"
                   mode="widthFix"></image>
          </view>
          <view class="middle">微信支付</view>
          <view class="right" v-if="payMethod === '微信支付'">
            <u-icon name="checkmark-circle-fill" color="#19be6b" size="28"></u-icon>
          </view>
        </view>
        <!--<view class="pay-method-item" @click="selectPayMethod('支付宝')">-->
        <!--  <view class="left">-->
        <!--    <image class="icon"-->
        <!--           style="width: 66px; height: 66px"-->
        <!--           src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-front/druid/saas-v5/%E6%94%AF%E4%BB%98%E5%AE%9D%E6%94%AF%E4%BB%98%402x.png"-->
        <!--           mode="widthFix"></image>-->
        <!--  </view>-->
        <!--  <view class="middle">支付宝</view>-->
        <!--  <view class="right" v-if="payMethod === '支付宝'">-->
        <!--    <u-icon name="checkmark-circle-fill" color="#19be6b" size="28"></u-icon>-->
        <!--  </view>-->
        <!--</view>-->
      </view>
    </view>
    <view class="footer">
      <view class="pay-bar">
        <view class="left">
          <view class="unit">¥</view>
          <view class="number">{{ bill.cost }}</view>
        </view>
        <view class="right">
          <u-button color="#FF7947" shape="circle" @click="pay">确定交易</u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {billDetail, billPay} from "@/api/manager/order";

export default {
  data() {
    return {
      billId: null,
      bill: {},
      payMethod: '微信支付'
    };
  },
  onLoad(options) {
    const billId = options.id;
    this.billId = billId;
    this.getBill(billId)
  },
  methods: {
    getBill(billId) {
      this.$modal.loading("加载中...")
      // 获取账单详情
      billDetail(billId).then(res => {
        this.bill = res.data
        this.$modal.closeLoading()
      }).catch(err => {
        console.log(err)
        this.$modal.closeLoading()
      })
    },
    pay() {
      if(!this.bill.billId) {
        return
      }
      // 调起微信支付
      billPay(this.billId).then(res => {
            wx.requestPayment({
              timeStamp: res.data.timeStamp,
              nonceStr: res.data.nonceStr,
              package: res.data.package,
              signType: res.data.signType,
              paySign: res.data.paySign,
              success: (e)=> {
                console.log("调起成功!")
                // 跳转到支付成功页面
                this.$tab.redirectTo('/pages/manager/bill/pay-success?billId='+this.billId)
              },
              fail: function (e) {
                console.log("失败: " + e);
              }
            })
          }
      )
    }
  },
}
</script>

<style lang="scss" scoped>
.bill-pay-page {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;

  .content {
    .amount {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: 40rpx;

      .title {
        font-size: 32rpx;
      }

      .number {
        margin-top: 20rpx;
        font-size: 42rpx;
        font-weight: bold;
      }
    }

    .pay-methods {
      background-color: #fff;
      margin-top: 40rpx;

      .pay-method-item {
        display: flex;
        padding: 20rpx;
        justify-content: center;
        align-items: center;

        .left {
          width: 60rpx;
          height: 60rpx;
        }

        .middle {
          flex: 1;
          margin-left: 20rpx;
        }

        .right {
          width: 120rpx;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }

  .footer {
    background-color: #f8f8f8;
    border-top: 1px solid #e0e0e0;
    padding: 16rpx 16px env(safe-area-inset-bottom) 16rpx;

    .pay-bar {
      display: flex;
      justify-content: space-between;
      padding: 10rpx;

      .left {
        display: flex;
        align-items: center;
        color: #FF7947;
        padding: 0 20rpx;

        .unit {
          font-size: 36rpx;
        }

        .number {
          font-size: 42rpx;
          margin-left: 8rpx;
          font-weight: bold;
        }
      }

      .right {
        width: 200rpx;
      }
    }
  }
}


</style>
